<!-- 签到 -->
<template>
	<view >
		
		<view style="background: linear-gradient(to bottom,#99bcf9,#fff);">
			 <view style="padding-top: 100rpx;display: flex;">
				<view style="font-size: 74rpx;font-weight: bold;margin-left: 30rpx;line-height: 74rpx;height: 74rpx">{{point}}</view>
				<text style="font-size: 36rpx;line-height: 74rpx;height: 74rpx;text-align: center;padding-top: 14rpx;">积分</text>
			</view>
			<view class="u-flex u-col-center sign-box" style="margin-left: 30rpx;;">
				<button :disabled="isPresentMonth || isSign" @tap="onSign"
					class="u-reset-button sign-btn">{{ isSign ? '已签到' : '签到' }}</button>
			</view>
		</view>
		<view style="position: absolute;top: 60rpx;right: 30rpx;" @tap="tojfsc" >
			<image style="width: 400rpx;height: 400rpx;" src="https://image.hzwltb69.com/app/images/signsc.png"></image> 
		</view> 
		
		<view class="calendar">
		
			 <view class="sign-everyday u-row-between" style="margin-left: 20rpx;margin-top: 20rpx;padding-top: 20rpx;">
				<view class="sign-num-box">
					已连签
					<text class="sign-num">{{ cuntinueDays }}</text>
					天
				</view>
				
				<view  style="margin-top: 24rpx;font-size: 24rpx;">
					<text style="color: #ccc;">连续签到获取更多的积分</text>
				</view>
			</view> 
		 
			<view class="myDateTable" style="margin-top: 50rpx;margin-left: 6rpx;padding-top: 20rpx;">
				<view v-for="(item, j) in days" :key="j" class="dateCell u-flex u-row-center u-col-center" >
					<view style="background: #eff8ff; height: 150rpx;" >
					 
						<view v-if="item.id>0" >
							<view style="text-align: center;width: 100rpx;height: 80rpx;line-height: 80rpx;color:#92B3E9;font-size: 36rpx;font-weight: 500;">+{{ item.point }}</view>  
							<image style="text-align: center;width: 50rpx;height: 50rpx;margin-left: 25rpx;" src="https://image.hzwltb69.com/app/images/siged.png"></image>
						</view>
					 
						<view v-else>
							<view style="text-align: center;width: 100rpx;height: 80rpx;line-height: 80rpx;color:#130908;font-size: 30rpx;font-weight: 500;">+{{ item.point }}</view>
							<view style="text-align: center;width: 100rpx;height: 60rpx;line-height: 60rpx;color:#ccc;font-size: 24rpx;font-weight: 500;"> {{setdata(item.date) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
    <view class="img-box" @tap="tojfsc">
      <image class="ljshop-image" src="https://image.hzwltb69.com/app/date/2023/图片 226.gif" mode="widthFix"></image>
    </view>
    <view class="big-box">
      <h4 style="margin-bottom: 20rpx">兑换优惠券/抽奖券</h4>
      <view class="cards">
        <view v-for="(item,index) in conList"
              @click="index !== conList.length - 1 ? userExchangeCon(item.amount) : userExchangePrizeNum()"
              :key="index" class="card">
          <view class="top-box">
            <view class="left">
              <view v-if="index !== conList.length - 1">
                <view class="title">购物券</view>
                <view>使用期限：3个月</view>
              </view>
              <view v-else>
                <view class="title">抽奖券</view>
                <view>使用期限：3个月</view>
              </view>
            </view>
            <view class="right">
              <span class="mon" v-if="index !== conList.length - 1">￥</span>
              {{ index !== conList.length - 1 ? item.amount : 1}}
            </view>
          </view>
          <view class="btm-box">
            <image src="https://image.hzwltb69.com/app/date/2023/jifenicon.png" class="icons"></image>
            {{item.amount * 1000}}
          </view>
        </view>
      </view>
    </view>
		<!-- 实物 -->
<!--			<view class="hot-goods u-m-b-10 u-p-x-16">-->
<!--				<view class="u-waterfall">-->
<!--					<view id="u-left-column" class="u-column">-->
<!--						<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList"-->
<!--							:key="leftGoods.id">-->
<!--							<sh-goods-card-exchange :detail="leftGoods" :type="leftGoods.activity_type" :image="leftGoods.large"-->
<!--								:title="leftGoods.name" :subtitle="leftGoods.caption?leftGoods.caption:''" :point="leftGoods.exchangePoint"-->
<!--								:originPrice="leftGoods.price.toFixed(2)" :sales="leftGoods.sales"-->
<!--								-->
<!--								@click="$Router.push({ path: '/pages/goods/pointdetail', query: { id: leftGoods.id } })">-->
<!--							</sh-goods-card-exchange>-->
<!--						</view>-->
<!--					</view>-->
<!--					<view id="u-right-column" class="u-column">-->
<!--						<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList"-->
<!--							:key="rightGoods.id">-->
<!--							<sh-goods-card-exchange :detail="rightGoods" :type="rightGoods.activity_type"-->
<!--								:image="rightGoods.large" :title="rightGoods.name" :subtitle="rightGoods.caption?rightGoods.caption:''"-->
<!--								:point="rightGoods.exchangePoint" :originPrice="rightGoods.price.toFixed(2)" -->
<!--								:sales="rightGoods.sales"-->
<!--								-->
<!--								@click="$Router.push({ path: '/pages/goods/pointdetail', query: { id: rightGoods.id } })">-->
<!--							</sh-goods-card-exchange>-->
<!--						</view>-->
<!--					</view>-->
<!--				</view>-->
<!--			</view>-->
	</view>
</template>

<script>

 import shGoodsCardExchange from '../components/sh-goods-card-exchange.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
 import ViewLog from "@/pages/user/view-log.vue";
	export default {
		components: {
      ViewLog,
		
			 shGoodsCardExchange
		},
		data() {
			return {
				days: [], //日历
				cuntinueDays: 0, //签到天数
				score: '', //签到获得的积分
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				cur_day: 0, //当前选择的天
				today: parseInt(new Date().getDate()), //本日
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六'], //星期
				isPresentMonth: false, //是否可签到
				isSign: false,
				showSign: false,
				point:0,
				isEmpty: false,
				goodsList: [],
				searchVal: '',
				categoryId: 0,
				page: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 0,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				hasMroe: true,
				order: '',
				rebate:0,
				isAdding:false,
				conList:[]
			};
		},
		computed: {},
		onLoad() {
			this.cur_year = this.toYear;
			this.cur_month = this.toMonth;
			this.cur_day = this.today;
			this.getSignList();
			this.walletinit()
			this.getGoodsList();
			this.userExchangeList()
		},
		methods: {
			// 购物券列表
			userExchangeList(){
				this.$http('coupons.userExchangeList',{})
				.then(res=>{
					this.conList = res.data.list
          this.conList.push({
            amount: 0.1,
            id: 0
          })
				})
			},
			// 兑换购物券
			userExchangeCon(e){
				let that = this
				let num = e
				if(that.point < e * 1000){
					uni.showToast({
						icon:'error',
						title:'您的积分不足'
					})
					return
				}
				uni.showModal({
					title:'兑换优惠券',
					content:`确定使用${e * 1000}积分兑换${e}元优惠券吗?`,
					success(e){
						if(e.confirm){
							that.$http('coupons.userExchangeCon',{
								UId: uni.getStorageSync('UId'),
								amount: num
							})
							.then(res => {
								// res.code == 200 ? uni.showToast({icon: 'success',title: '兑换成功'}) : uni.showToast({icon: 'fail',title: '兑换失败'})
								uni.showToast({
									icon:'success',
									title:'兑换成功'
								})
								that.point -= num * 1000
							})
						}
					},
				})
			},
			// 兑换抽奖次数
			userExchangePrizeNum(){
				let that = this
				if(that.point < 100){
					uni.showToast({
						icon:'error',
						title:'您的积分不足'
					})
					return
				}
				uni.showModal({
					title:'兑换抽奖次数',
					content:`确定使用100积分兑换一次抽奖机会吗?`,
					success(e){
						if(e.confirm){
							that.$http('coupons.userExchangePrizeNum',{
								UId: uni.getStorageSync('UId'),
							})
							.then(res => {
								// res.code == 200 ? uni.showToast({icon: 'success',title: '兑换成功'}) : uni.showToast({icon: 'fail',title: '兑换失败'})
								uni.showToast({
									icon:'success',
									title:'兑换成功'
								})
								that.point -= 100
							})
						}
					},
				})
			},
			// 当前签到记录
			getSignList() {
				let that = this;
				that.$http('user.signList', {
					UId: uni.getStorageSync("UId")
				}).then(res => {
					// console.info(JSON.stringify(res))
					if(res.code == 1){
						that.days = res.data.checkins;
						that.cuntinueDays = res.data.continuousCheckinDays;
						that.isSign = res.data.isSigned;
					}else{
						uni.showToast({
							icon:'error',
							title:'获取签到记录失败'
						})
					}
				});
			},
			setdata(day){
				let list = day.split("-")
				return list[1]+'.'+list[2]
			},
			// 选中日期
			//签到
			onSign() {
				let that = this;
				let month = that.cur_month.toString().padStart(2, '0');
				let query = `${that.cur_year}-${month}`;
				that.$http(
					'user.sign', {
						UId: uni.getStorageSync("UId")
					},
					'签到中...'
				).then(res => {
						that.getSignList();
						this.walletinit()
						// that.score = res.data.score;
						// that.getUserInfo();
						// that.showSign = true;
				});
			},
			tojfsc(){
				this.$Router.push({
				 path: "/pages/goods/pointlist",
				});
			},
			walletinit() {
				if (uni.getStorageSync("UId")) {
					let that = this;
					that.$http('user.apiinfo', {
						UId: uni.getStorageSync("UId")
					}).then(res => {
						this.isRefresh = false;
						this.point = res.data.HzMember.point;
					});
				}
			},
			async splitData() {
				if (!this.tempList.length) {
					this.isAdding = false
					return
				};
				if(this.tempList.length == 1){
					this.isAdding = false
				}
			 
				let item = this.tempList[0];
				if (!item) return;
			
				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					this.leftList.push(item);
				}
			
				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},
			
			onFilter(e) {
				this.order = e;
				this.goodsList = [];
				this.page = 1;
				this.lastPage = 1;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			// 键盘搜索,输入搜索
			onSearch() {
				this.goodsList = [];
				this.page = 1;
				this.lastPage = 1;
				this.keywords = this.searchVal;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			goBack() {
				let pageList = getCurrentPages();
				if (pageList.length > 1) {
					// #ifdef MP-WEIXIN
					wx.navigateBack();
					// #endif
					// #ifndef MP-WEIXIN
					uni.navigateBack();
					// #endif
				} else {
					this.$Router.replaceAll('/pages/index/index');
				}
			},
			
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			
			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.clear();
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.loadStatus = 'loading';
					this.isAdding=true
				//console.info(that.keywords)
				//console.info(that.page)
				//console.info(that.order)
				let defaultOrder = 0;
				let priceOrder = 0;
				let salesOrder = 0;
				let newProdcutOrder = 0;
				if (that.order) {
					defaultOrder = that.order.defaultOrder;
					priceOrder = that.order.priceOrder;
					salesOrder = that.order.salesOrder;
					newProdcutOrder = that.order.newProdcutOrder;
				}
				uni.showLoading({
					
				})
				that.$http('goods.exchangelist', {
					exchange: "EXCHANGE",
					page: that.page,
					salesOrder: salesOrder,
					priceOrder: priceOrder,
					defaultOrder: defaultOrder,
					newProdcutOrder: newProdcutOrder
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						if (res.productList.length > 0) {
							if (that.page == 0) {
								if(res.productList.length<10){
									this.hasMroe = false;
									this.loadStatus="nomore"
								}
								this.rebate = res.rebate
								this.hasMroe = true;
								that.goodsList = res.productList;
								that.tempList = res.productList;
								that.goodsList.length && that.splitData();
							} else {
								that.goodsList = res.productList;
								that.tempList = res.productList;
								that.goodsList.concat(res.product)
								that.tempList.concat(res.product)
								that.goodsList.length && that.splitData();
							}
						} else {
							this.hasMroe = false;
						}
			
					}
				});
			}

		}
	};
</script>

<style lang="scss">
	// 日历
	.calendar {
		 
		background: url("https://image.hzwltb69.com/app/images/signdateback.png") no-repeat center / 100% 100%;
		width: 730rpx;
		margin-left: 10rpx;

		.sign-everyday {
			height: 100rpx;
		
			.sign-everyday-title {
				font-size: 32rpx;
				font-weight: 500;
			 
			}

			.sign-num-box {
				font-size: 26rpx;
				font-weight: bold;
				color: #130908;

				.sign-num {
					font-weight: 600;
					color: red;
					padding: 0 10rpx;
				}
			}
		}

		// 年月日
		.bar {
			height: 100rpx;

			.date {
				font-weight: 600;
			}
		}

		// 星期
		.week {
			.week-item {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				flex: 1;
			}
		}

		// 日历表
		.myDateTable {
			display: flex;
			flex-wrap: wrap;

			.dateCell {
				width: (714rpx/7);
				height: 80rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);

				.cell {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}


	.is-nosign {
		width: 40rpx;
		height: 40rpx;
		background: #1aa034 ;
		border-radius: 50%;
		box-shadow: 0 0 4rpx 4rpx rgba(#e3ad5b, 0.4);
		color: #fff;
	}

	// 签到按钮
	.sign-box {
		height: 140rpx;
		// width: 100%;
	
	.sign-btn {
			width: 250rpx;
			line-height: 70rpx;
			background: url("https://image.hzwltb69.com/app/images/signback.png") no-repeat center / 100% 100%;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color:#130908;
		}
	}

	.sign-modal-box {
		width: 520rpx;
		background: #fff;
		border-radius: 20rpx;
		position: relative;

		.modal-head {
			height: 320rpx;
			align-items: center;
			justify-content: center;
			position: relative;

			.modal-bg {
				width: 100%;
				height: 100%;
			}

			.sign-tag {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				top: 50rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.sign-num-box {
				font-size: 30rpx;
				color: #fff;
				position: absolute;
				top: 150rpx;
				left: 50%;
				transform: translateX(-50%);

				.sign-num {
					font-size: 36rpx;
					font-weight: 600;
					padding: 0 10rpx;
				}
			}
		}

		.modal-content {
			padding: 30rpx 0;

			.sign-success {
				font-size: 34rpx;

				font-weight: bold;
				color: rgba(227, 173, 91, 1);
			}

			.sign-score {
				font-size: 26rpx;

				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				padding-top: 16rpx;
			}
		}
	
	.modal-bottom {
			padding-bottom: 47rpx;

			.confirem-btn {
				width: 300rpx;
				line-height: 70rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				border-radius: 35rpx;
				padding: 0;
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
	.sh-title-card {
		width: 750rpx;
	}
	.title-box {
		width: 750rpx;
		height: 88rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 30rpx;
	
		.title-bg {
			width: 100%;
			height: 100%;
		}
		.title-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-weight: bold;
		}
	}
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}
	
	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}
	
	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}
	
	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
  .img-box{
    width: 94%;
    height: 200rpx;
    border-radius: 20rpx;
    overflow: hidden;
    margin-left: 3%;
    margin-top: 50rpx;
  }
  // 兑换券
  .big-box{
    padding: 20rpx;
    .cards{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      .card{
        width: 48%;
        height: 200rpx;
        background: linear-gradient(90deg, #fff0e0, #fddfc4);
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        .top-box{
          height: 145rpx;
          display: flex;
          justify-content: space-between;
          padding-top: 20rpx;
          border-bottom: 1rpx solid #fddfc4;
          .left{
            display: flex;
            font-size: 24rpx;
            .title{
              color: #b15e09;
            }
          }
          .right{
            color: #ff5733;
            font-size: 50rpx;
            font-weight: 600;
            margin-top: 40rpx;
            position: relative;
          }
          .mon{
            position: absolute;
            width: 100rpx;
            height: 100rpx;
            top: 25rpx;
            left: -25rpx;
            font-size: 20rpx;
            font-weight: 600;
          }
        }
        .btm-box{
          color: #d73030;
          font-weight: 600;
          font-size: 26rpx;
          height: 55rpx;
          //line-height: 55rpx;
          display: flex;
          align-items: center;
          .icons{
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
        }
      }
      .card:last-child{
        color: #fff;
        background: linear-gradient(90deg, rgba(255, 135, 154, 0.61), #ff6d8c);
        .right{
          color: #fff;
        }
        .title{
          color: #fff !important;
        }
        .btm-box{
          color: #fff;
        }
      }
    }
  }
</style>
